<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <head>
        <meta charset="UTF-8">
        <title>输入兴趣爱好</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <!-- 第一阶段
        在页面中，有一个单行输入框，一个按钮，输入框中用来输入用户的兴趣爱好，允许用户用半角逗号来作为不同爱好的分隔。
        当点击按钮时，把用户输入的兴趣爱好，按照上面所说的分隔符分开后保存到一个数组，过滤掉空的、重复的爱好，在按钮下方创建一个段落显示处理后的爱好。 -->
        <!-- 第二阶段
        单行变成多行输入框，一个按钮，输入框中用来输入用户的兴趣爱好，允许用户用换行、空格（全角/半角）、逗号（全角/半角）、顿号、分号来作为不同爱好的分隔。
        当点击按钮时的行为同上 -->
        <!-- 第三阶段
        
        用户输入的爱好数量不能超过10个，也不能什么都不输入。当发生异常时，在按钮上方显示一段红色的错误提示文字，并且不继续执行后面的行为；当输入正确时，提示文字消失。
        
        同时，当点击按钮时，不再是输出到一个段落，而是每一个爱好输出成为一个checkbox，爱好内容作为checkbox的label。 -->
        <div class="container">
            <h1>请输入兴趣爱好</h1>
            <p>用逗号、换行、空格、顿号、分号隔开</p>
            <!-- <input type="text"> -->
            <textarea cols="40" rows="6">足球，篮球,壁球 网球
可乐
雪碧;白开水、running；running，bike</textarea>
            <div class="warn">输入数量不能超过10个，或什么都不输</div>
            <button>处理并显示</button>
            <div class="show"></div>
        </div>
        <script src="js/util.js"></script>
        <script src="js/task0002_1.js"></script>
    </body>
</html>